Rsd.define('Rsd.example.ImagePage', {
    extend: 'Rsd.container.Page',
    xtype:'p-image-view',
    requires: [
        'Rsd.form.Button',
        'Rsd.form.Images',
        'Rsd.widget.ImageViewer'
    ],
    layout:'vbox',
    height:1500,
    items:[
       
        {
            xtype: 'images',
            label:{content:'this is images control in readonly mode',position:'top',align:'left'},
            height: 300,
            width:'100%',
            readonly:true,
            border:false,
            itemStyle:{height:240,width:'20%'},
            value: [
                { 
                    src: 'https://img.alicdn.com/tfs/TB1Q7YOdMHqK1RjSZFgXXa7JXXa-2868-912.png', 
                },
                { 
                    src: 'https://img1.baidu.com/it/u=3971138395,940312202&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500' 
                },
                { 
                    src: 'https://img0.baidu.com/it/u=3299748499,2184400864&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', 
                },
                { 
                    src: 'https://image.scol.com.cn/data/attachment/forum/201802/12/182854mtw1exvsqsy0wqu3.jpg', 
                }
            ]
        }, 
        {
            xtype:'button',
            width:150,
            text:'Show ImageView',
            handler:function () {
                {
                    var _view = Rsd.create('Rsd.widget.ImageViewer',{width:'100%', height:300});

                    _view.showDialog().loadData([
                        'https://www.redjs.cn/resources/images/LOGO.PNG',
                        'https://www.redjs.cn/resources/images/redmicro/001.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/002.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/003.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/004.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/005.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/006.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/007.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/008.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/009.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/010.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/011.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/012.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/013.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/014.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/015.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/017.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/018.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/019.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/020.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/021.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/022.jpeg',
                        'https://www.redjs.cn/resources/images/redmicro/023.jpeg'


                    ]);

                }
            }
        },
        {
            xtype: 'image', 
            label:{content:'this is image control in readonly mode',position:'bottom',height:40},
            width:300,
            height:200,
            readonly:true,
            border: false, 
            src: '../resources/images/LOGO.PNG'
        },
        {
            xtype: 'image', 
            label:{content:'this is image control in edit mode & from local',position:'bottom',height:40},
            width:300,
            height:200,
            readonly:false,
            border: true,
            toolbar:false,
            from:'local',
            src: '../resources/images/LOGO.PNG'
        },
        {
            xtype: 'image', 
            label:{content:'this is image control in edit mode & from server',position:'bottom',height:40},
            width:300,
            height:200,
            readonly:false,
            border: true,
            toolbar:false,
            from:'server',
            src: '../resources/images/LOGO.PNG'
        },
        {
            xtype:'images',
            label:{content:'select one image from albums ', position: 'top',align:'left'},
            width:'100%',
            height: 300,
            maxLength:1, 
            itemStyle:{height:230,width:'40%'},
            value:[ ]
        },
        {
            xtype:'images',
            label:{content:'select 4 images from albums', position: 'top',align:'left'},
            width:'100%',
            height: 550, 
            itemStyle:{height:240,width:'40%'},
            value:[
                'https://img.alicdn.com/tfs/TB1Q7YOdMHqK1RjSZFgXXa7JXXa-2868-912.png', 
                'https://img1.baidu.com/it/u=3971138395,940312202&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'
            ]
        }

    ],
    /* */
    constructor: function ImagePage(config) {
        config = config || {};
        this.apply(config);

    },
    /**
     * 
     */
    load:function load() {
        
    }



},function(type){


});